<template>
	<div class="container fullHeight">
		<div class="header">
			<el-card>
				<div class="searchArea">
					<el-form ref="form" :model="form" label-width="80px">
						<el-form-item label="时间筛选" style="margin-bottom: 0;">
							<el-date-picker v-model="value2" type="daterange" align="right" unlink-panels
								range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
								:picker-options="pickerOptions" @change="timeChange" format="yyyy-MM-dd"
								value-format="timestamp">
							</el-date-picker>
						</el-form-item>
					</el-form>
					<div class="" style="margin-left: 20px;">
						<el-button type="primary" @click="goSearch()">查询</el-button>
					</div>
				</div>


			</el-card>
		</div>
		<div class="indexList-top">
			<div class="indexList-topItem">
				<span>转单量</span>
				<span>{{indexInfo.zdnum}}</span>
			</div>
			<div class="indexList-topItem">
				<span>发单量</span>
				<span>{{indexInfo.fdnum}}</span>
			</div>
			<div class="indexList-topItem">
				<span>销售量</span>
				<span>{{indexInfo.xsnum}}</span>

			</div>
			<div class="indexList-topItem">
				<span>退单申请量 </span>
				<span>{{indexInfo.tdznum}}</span>

			</div>
			<div class="indexList-topItem">
				<span>退单同意量 </span>
				<span>{{indexInfo.ytdnum}}</span>
			</div>

		</div>

		<div class="indexList-bottom">
			<div class="indexList-bottomItem">
				<span>推送率</span>
				<span>{{indexInfo.tspercentage}}%</span>
			</div>
			<div class="indexList-bottomItem">
				<span>销售率</span>
				<span>{{indexInfo.xspercentage}}%</span>
			</div>
			<div class="indexList-bottomItem">
				<span>退单率</span>
				<span>{{indexInfo.tdpercentage}}%</span>
			</div>
		</div>

	</div>
</template>
<script>
	import {
		getindex
	} from "@/api/index.js";
	export default {
		data() {
			return {
				formLabelWidth: '100px',
				tableData: [],

				form: {
					inttime: '',
					endtime: '',
					classifyid: 0
				},
				indexInfo: [],
				value2: [],
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
			}
		},
		filters: {
			datefilter(val) {
				if (val) {
					var date = new Date(parseInt(val) * 1000);
					var Year = date.getFullYear();
					var Moth =
						date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1;
					var Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
					var Hour =
						date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
					var Minute =
						date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
					var Sechond =
						date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
					var GMT =
						Year +
						"-" +
						Moth +
						"-" +
						Day +
						"   " +
						Hour +
						":" +
						Minute +
						":" +
						Sechond;

					return GMT;
				} else {
					return "";
				}
			},
		},
		mounted() {
			this.getDayTime();
			this.getList();
		},
		methods: {
			// 搜索按钮点击方法
			goSearch() {
				console.log('xxzzzzzzzzzz', this.value2)
				if (this.value2 == '' || this.value2 == null) {
					this.$message({
						type: "warning",
						message: '请选择时间'
					})
					return
				}
				this.form.inttime = this.value2[0] / 1000;
				this.form.endtime = this.value2[1] / 1000;

				this.getList();
			},
			timeChange(val) {

			},
			getDayTime() {
				// 获取当日的0点时间戳
				var startOfDay = new Date();
				startOfDay.setHours(0, 0, 0, 0);
				var startTimestamp = startOfDay.getTime();

				// 获取当日的24点时间戳
				var endOfDay = new Date();
				endOfDay.setHours(23, 59, 59, 999);
				var endTimestamp = endOfDay.getTime();
				this.form.inttime = startTimestamp / 1000;
				this.form.endtime = endTimestamp / 1000;
				this.value2 = [startOfDay, endOfDay];
				// const now = new Date();
				// const startDate = new Date(now);
				// const endDate = new Date(now);
				// startDate.setHours(0, 0, 0, 0); // 设置为当天开始的时间
				// endDate.setHours(23, 59, 59, 999); // 设置为当天结束的时间
				// this.value2 = [startDate, endDate];
			},
			reloadForm() {
				this.getList();
			},

			// 获取日志列表
			async getList() {
				let result = await getindex({
					inttime: parseInt(this.form.inttime),
					endtime: parseInt(this.form.endtime),
					classifyid: this.form.classifyid
				});
				console.log('xxxxxxxxxx', result)
				if (result.code == 0) {
					this.indexInfo = result.data;
				}

			},



		},
	}
</script>
<style>
	.header {
		font-size: 18px;
		font-weight: 400
	}

	.fullHeight {
		height: calc(100vh - 50px);
	}

	.container {
		width: 100%;
		background-color: #EBEEF5;
	}

	.indexList-top {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: 20px;
		justify-content: center;
	}

	.indexList-topItem {
		width: 19%;
		background-color: #fff;
		filter: drop-shadow(2px 2px 3px #e5e5e5);
		height: 150px;
		display: flex;
		flex-direction: column;
		padding: 20px;
	}

	.indexList-topItem>span:first-child {
		font-size: 14px;
	}

	.indexList-topItem>span:nth-child(2) {
		font-size: 20px;
		margin-top: 20px;
		font-weight: bolder;
	}

	.specialItem {
		width: 32%;
		background-color: #fff;
		filter: drop-shadow(2px 2px 3px #e5e5e5);
		height: 150px;
		display: flex;
		justify-content: space-between;
		padding: 20px;
	}
	
	.indexList-bottom {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		margin-top: 20px;
		justify-content: center;
	}
	.indexList-bottomItem {
		width: 32%;
		background-color: #fff;
		filter: drop-shadow(2px 2px 3px #e5e5e5);
		height: 150px;
		display: flex;
		flex-direction: column;
		padding: 20px;
	}
	.indexList-bottomItem>span:first-child {
		font-size: 14px;
	}
	
	.indexList-bottomItem>span:nth-child(2) {
		font-size: 20px;
		margin-top: 20px;
		font-weight: bolder;
	}
	.searchArea {
		display: flex;
		align-items: center;
	}
</style>